import React from 'react';
import type { CSSProperties } from 'react';
import { DateRangePicker } from 'tdesign-react';
import type { DateRangePickerProps, DateRangeValue } from 'tdesign-react';
import dayjs from 'dayjs';

export interface YHDateRangeProps extends Omit<DateRangePickerProps, 'value' | 'defaultValue'> {
  value?: DateRangeValue;
  defaultValue?: DateRangeValue;
  className?: string;
  style?: CSSProperties;
}

const defaultRecent7Days: DateRangeValue = [
  dayjs().subtract(7, 'day').format('YYYY/M/D'),
  dayjs().subtract(1, 'day').format('YYYY/M/D'),
];

/**
 * A scoped, reusable DateRange wrapper that:
 * - Keeps TDesign behavior and appearance
 * - Uses compact date format and separator for shorter width
 * - Applies a scoped class for icon/spacing fixes to avoid clipping after build
 */
const YHDateRangePicker: React.FC<YHDateRangeProps> = ({
  className,
  style,
  defaultValue,
  value,
  placeholder = ['开始时间', '结束时间'],
  mode = 'date',
  format = 'YYYY/M/D',
  separator = '–',
  size = 'medium',
  onChange,
  ...rest
}) => {
  return (
    <DateRangePicker
      mode={mode}
      placeholder={placeholder}
      value={value}
      defaultValue={value ? undefined : defaultValue ?? defaultRecent7Days}
      format={format}
      separator={separator}
      size={size}
      className={`yh-date-range${className ? ` ${className}` : ''}`}
      style={{ minWidth: 360, ...style }}
      onChange={onChange}
      {...rest}
    />
  );
};

export default YHDateRangePicker;
